<template>
    <div class="drawer-main">
      <el-drawer
        ref="drawerMain"
        :title="drawerTitle"
        :visible.sync="drawer"
        direction="rtl"
        size="60%"
        :append-to-body="true"
        :wrapperClosable="false"
        @closed="handleClose"
      >
        <div class="drawer-content">
          <template>
            <p class="materialType-title">物料类型：{{materialTypeData.name}}</p>
            <div class="form-section">
                <ele-form
                  ref="validateForm"
                  :key="materialTypeData.hasBrand ? 'form1' + materialCode : 'form2'"
                  :disabled="disabled"
                  v-model="currentFormData"
                  v-bind="materialTypeData.hasBrand ? hasBrandFormConfig : noBrandFormConfig"
                >
                </ele-form>
            </div>
          </template>
        </div>
        <div class="btns">
          <el-button @click="quit">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </div>
      </el-drawer>
    </div>
  </template>
  <script>
  import { setTimeout } from 'core-js';
  import { mesTmMaterialBrandPage } from "@/api/materials/brand";
import { formDescDialogMinxin } from './quotationFormConfig'
// import { nextTick } from 'vue/types/umd';
  export default {
    mixins: [formDescDialogMinxin],
    data() {
      const self = this;
      return {
        materialCode: null,
        detailId: null,
        operateType: 0,
        currentRowIndex: 0,
        drawer: false,
        showViewer: false,
        currentFormData: {},
        provideTypeList: [
          {
            name: '原厂件',
            code: 'first',
            value: 1,
            hasBrand: false,
          },
          {
            name: '拆车件',
            code: 'fourth',
            value: 4,
            hasBrand: false,
          },
          {
            name: '品牌件',
            code: 'second',
            value: 2,
            hasBrand: true,
          },
          {
            name: '其他',
            code: 'third',
            value: 3,
            hasBrand: true,
          }
        ],
      }
    },
    props: {
      materialType: {
        type: Number,
        default: 0,
      },
      materialDetail: {
        type: Object,
        default: 0,
      }
    },
    watch: {
      materialDetail: {
        handler(val) {
          this.currentFormData.num = val.materialNum
          this.currentFormData.brand = val.materialBrand
          this.currentFormData.materialUnit = val.materialUnit
        },
        deep: true,
        immediate: true
      }
    },
    computed: {
      drawerTitle() {
        return this.operateType ? '编辑物料报价' : '添加物料报价' 
      },
      disabled() {
        return false
      },
      materialTypeData() {
        return this.provideTypeList.find(ele => ele.value == this.materialType) || {
          name: '原厂件',
          code: 'first',
          value: 1,
          hasBrand: false,
        }
      }
    },
    mounted() {
    },
    methods: {
      async changeOptions(func, filed) {
        if(this.$refs.validateForm) {
          let list = await func()
          this.$refs.validateForm.setOptions(list, filed)
        }
      },
      getBrandList() {
        mesTmMaterialBrandPage({
          pageNum: 1,
          pageSize: 1000000,
          materialCode: this.materialCode
        }).then(res => {
          this.$refs.validateForm.setOptions(res.data.result.records, "brand")
        })
      },
      showDrawer() {
        this.drawer = true
        this.getBrandList()
        if(this.operateType == 1) {
        }
      },
      addItem(type) {
       
      },
      quit() {
        this.drawer = false
        this.currentFormData = {
          materialUnit: this.materialDetail.materialUnit,
          brand: this.materialDetail.materialBrand,
          num: this.materialDetail.materialNum
        }
      },
      // 验证所有组件的内置验证方法
      validateComponent() {
        let allForm = [this.$refs[`validateForm`]]
        console.log('forms', allForm)
        const validators = allForm.filter(form => form)
          .map((form) => form.validateForm)
          .filter(Boolean);
        console.log('validators', validators)
  
        return Promise.all(validators.map((fn) => fn()));
      },
      handleSubmit() {
        this.validateComponent().then(res => {
          if(this.operateType) {
            this.$emit('updateList', JSON.parse(JSON.stringify(this.currentFormData)))
          }
          else {
            this.$emit('addData', JSON.parse(JSON.stringify(this.currentFormData)))
          }
          this.quit()
        }).catch(err => {
          console.log(err)
        })
      },
      clearDialog() {
        this.quit()
      },
      handleClose() {
        this.quit()
      }
    }
  }
  </script>
  <style lang="scss" scoped>
  .drawer-main {
    /deep/.el-drawer__body {
      padding: 0 20px;
    }
  }
  .materialType-title {
    font-weight: bold;
    line-height: 30px;
    padding-left: 20px;
    background-color: #ddd;
    margin-bottom: 20px;
  }
  .form-section {
    width: 100%;
    padding: 0 40px;
    position: relative;
    
    .form-div {
      position: relative;
      border-top: solid 2px #ccc;
      padding-top: 40px;
    }
    .form-div-first-child {
      border-top: none;
      padding-top: 0;
    }
    .icon-position {
      position: absolute;
      top: 6px;
      right: 0;
      color: #0066ff;
      font-size: 20px;
      cursor: pointer;
      z-index: 9999;
    }
  }
  .btns {
    margin: 20px 0;
    text-align: right;
  }
  </style>